@import "mixins/mixins";
@import "common/var";
@import "_main";

@include b(home) {
  swiper {
    height: $--swiper-height;
  }

  @include e(header) {

    @include m(slide-image) {
      height: 100%;
      width: 100%;
    }

    @include m(item-container) {
      width: 100%;
      height: 80px;
      display: flex;
    }

    @include m(item) {
      flex: 1;
      text-align: center;
      padding-top: 12px;

      image {
        width: 32px;
        height: 32px;
      }

      p {
        color: $--color-94;
        font-size: 12px;
      }
    }
  }

  @include e(tips) {
    height: 52px;

    image {
      margin-right: 13px;
      margin-left: 13px;
      width: 68px;
      height: 21px;
    }

    @include m(line) {
      margin-right: 13px;
      width: 1rpx;
      height: 80%;
      background-color: $--color-seperate;
    }

    p {
      font-size: 16px;
      color: $--color-21;
    }
  }

  @include e(show) {
    position: relative;
    display: inline-block;
    height: 268px;
    width: 100%;

    & img {
      width: 100%;
      height: 100%;
    }

    @include m(left) {
      height: 100%;
      width: 49.8%;
      // background-color: blueviolet;
      // background-image: url(../../static/images/position/01.png);
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }

    @include m(right-top) {
      position: absolute;
      top: 0;
      left: 50%;
      height: 50%;
      width: 50%;
      // background-color: yellowgreen;
      // background-image: url(../../static/images/position/02.png);
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }

    @include m(right-bottom) {
      position: absolute;
      top: 50.3%;
      left: 50%;
      height: 50%;
      width: 50%;
      // background-color: red;
      // background-image: url(../../static/images/position/03.png);
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }
  }

  @include e(t-container) {
    & .t__ad {
      width: 100%;
      height: 147px;
      // background: red;
      margin-bottom: 5px;
    }

    & .t__ad > image {
      width: 100%;
      height: 100%;
    }

    & .title {
      padding-left: 12px;
      font-weight: 600;
      font-size: 16px;
      line-height: 40px;
      height: 40px;
      color: #404040;
    }
  }

  @include e(t-list) {
    width: 100%;
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
    justify-content: space-between;

    @include m(item) {
      flex: 0 0 49.8%;

      image {
        width: 100%;
        height: 189px;
      }

      p {
        margin-left: 15px;
        font-size: 15px;
        color: $--color-21;
      }
    }

    @include m(item-desc) {
      font-size: 13px !important;
      color: $--color-90 !important;
    }

    @include m(item-price) {
        span {
          font-size: 12px;
        }
        font-size: 14px !important;
        color: #ff6b00 !important;
    }
  }

  @include e(b-list) {
    width: 100%;

    @include m(item) {
      // display: inline-block;
      width: 100%;
      height: 189px;

      image {
        width: 50%;
        height: 189px;
      }
    }

    @include m(title) {
      font-size: 15px;
      color: $--color-21;
    }

    @include m(info) {
      width: 40%;
      display: inline-block;
      vertical-align: top;
      text-align: left;
      padding: 36px 15px 0 15px;
    }

    @include when(right) {
      image {
        float: right;
      }
    }
  }
}
